<template>
	<div class="backtop" @mouseenter="MouseFun(true)" @mouseleave="MouseFun(false)" @click="goTop" v-if='IsScroll'>
		<div v-if="!show">
			<span class="iconfont icon-a-VectorStroke"></span>
		</div>
		<div v-else class="showsty">
			<span class="iconfont icon-a-Up-oneshang1"></span>

			<span class="top">顶部</span>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				els:'',
				IsScroll:false,
			}
		},
		created() {
		},
		mounted(){
			this.$nextTick(()=>{
				this.ele = document.querySelector('body');
				this.ele.addEventListener('scroll', this.scrollTop)
			})
			
		},
		methods: {
			MouseFun(item) {
				this.show = item
			},
			goTop() {
				//this.ele = document.querySelector('#app');
				
				this.scrollToTop(this.ele);
			},
			// *滚动条回到顶部**/
			scrollToTop(el) {
				const cubic = value => Math.pow(value, 3);
				const easeInOutCubic = value => (value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2);
				if (!el) return;
				const beginTime = Date.now();
				const beginValue = el.scrollTop;
				console.log(beginValue, 2123213);
				const frameFunc = () => {
					if (!el) return;
					const progress = (Date.now() - beginTime) / 500;
					if (progress < 1) {
						el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
			
						requestAnimationFrame(frameFunc);
					} else {
						el.scrollTop = 0;
					}
				};
				requestAnimationFrame(frameFunc);
			},
			searchDel(val) {
				this.isSearch = val;
			},
			scrollTop () {
			  if(this.ele.scrollTop){
					this.IsScroll = true;
				}else{
					this.IsScroll = false;
				}
			}
		}
	}
</script>

<style>
	.backtop {
		position: fixed;
		bottom: 198px;
		right: 40px;
		width: 56px;
		height: 56px;
		background: #FFFFFF;
		border-radius: 50%;
		opacity: 1;
		border: 1px solid #E0E0E0;
		display: flex;
		justify-content: center;
		align-items: center;
    cursor: pointer;
		z-index: 9999;
	}
	.backtop .icon-a-VectorStroke {
		width: 28px;
		height: 28px;
		font-size: 28px;
	}
	
	.backtop .showsty {
		width: 56px;
		height: 56px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}
	
	.backtop .showsty .icon-a-Up-oneshang1 {
		display: inline-block;
		width: 20px;
		height: 20px;
		font-size: 20px;
		/* line-height: 40px; */
	}
		
		.backtop .showsty .top {
		/* height: 12px; */
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		/* line-height: 12px; */
	}
</style>